For information about scripting the <BODY>
element, see the Scripting the <BODY> element topic.
The body of a HTML document, as its name suggests, contains all the text and images that make up the page, together with all the HTML elements that provide the control/formatting of the page. The format is :
<BODY>
The rest of the document included here
</BODY>
NOTE : The <BODY> ... </BODY>
elements are directly enclosed by the <HTML> ... </HTML>
elements.
It is possible to control the document colour scheme and background by specifying certain attributes in the <BODY ...>
declaration. However, it should be noted that most browsers provide the user with a means to over-ride colour schemes and prevent images from loading.
The BACKGROUND attribute can be used to point to an image file that will be tiled across the browser window, to provide a background for the document. Specifying :
<BODY BACKGROUND="imagename.gif">
Rest of the document goes here
</BODY>
would cause whatever text, images, etc. appeared in that document to be placed on a background consisting of the (imagename.gif) graphics file being tiled to cover the viewing area, much like bitmaps are used for Windows wallpaper. Browsers that support this attribute, allow the use of .GIF, .JPG images for HTML backgrounds, while Internet Explorer supports those, plus Windows .BMP files.
The BGCOLOR attribute allows setting of the background colour for the document
<BODY BGCOLOR="#rrggbb">
Rest of document goes here
</BODY>
Where "#rrggbb" is a hexadecimal (base 16) red-green-blue triplet used to specify the background colour.
For two tables, showing the possible colours that can be described using reserved colour names, see this topic
Clearly, once the background colours/patterns have been changed, it will be necessary to also be able to control the foreground to establish the proper display contrasts.
TEXT
This attribute is used to control the colour of all the normal text in the document. This basically consists of all text that is not specially coloured to indicate a link. The format of TEXT
is the same as that of BGCOLOR
.
<BODY TEXT="#rrggbb">
Rest of document goes here
</BODY>
colour names are valid values of this attribute
LINK, VLINK, and ALINK attributes
These attributes let you control the colouring of link text. VLINK
stands for visited link, and ALINK
stands for active link (this sets the colour that the link text will be for the time that it is clicked on). The default colouring of these is: LINK
=blue (#0000FF), VLINK
=purple (#800080), and ALINK
=red (#FF0000). Again, the format for these attributes is the same as that for BGCOLOR
and TEXT
.
<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Rest of document goes here
</BODY>
Colour names are valid values of this attribute.
NOTE : The ALINK
attribute is Netscape specific.
The ability to watermark HTML documents, by fixing a background image so that it doesn't scroll as a normal background image does, has been added to Microsoft's Internet Explorer since version 2.0. To give a page with a background image a watermark background, add BGPROPERTIES=FIXED to the BODY
element as follows:
<BODY BACKGROUND="filename.gif" BGPROPERTIES=FIXED>
NOTE : This attribute is Internet Explorer specific.
LEFTMARGIN attribute
This Internet Explorer attribute allows the left hand margin of the document to be set.
For example:
<BODY LEFTMARGIN="40">
This document is indented 40 pixels from the left hand edge of the browser window
</BODY>
TOPMARGIN attribute
This Internet Explorer specific attribute allows the top margin of the document to be set.
For example:
<BODY TOPMARGIN="40">
This document is indented 40 pixels from the top hand edge of the browser window
</BODY>
NOTE : Both of the above attributes can be set to 0, making the page start at the very top and very left hand side of the page.
Colouring Considerations.
Most graphical browsers allow the downloading of embedded images to be turned off to allow for faster downloading and display of the HTML document. If this has been activated by the user, then background images will not be loaded or displayed. If this happens and no BGCOLOR
attribute was specified, then all of the foreground text and link colouring attributes (TEXT, LINK, VLINK
and ALINK
) will be ignored. This is so that documents are not rendered illegible if the text colour scheme authored for use over the set image clashes with the default browser background.
Using the 'Safe' browser palette
Netscape and Internet Explorer will both 're-colour' any colour settings that aren't part of the system palette at the users screen resolution. I.e. your Web pages may look fantastic on your system at 16 bit (65,536) or 24 bit (16,777,216) colour depth, but if the person viewing your pages has their colour depth set to 8 bit (256) colour, or even less, then the colour scheme may not be displayed as authored (in some cases, the colours may not be displayed at all - if what you have specified is a pale colour, it may turn out white, as the browser will choose the nearest 'solid' colour in it's available palette). To allow for this, web pages that use colours should only use colours taken from what is known as the Safe browser palette (or Non-dithering palette). This palette consists of 216 colours (256 colours minus the palette entries reserved by the system, and those that vary across different systems (i.e. Windows/Macintosh platforms)). This means that you can be sure that the pages you are authoring (or the graphics in those pages) will display as authored on both Macintosh and Windows platforms. This palette uses multiples of 51 (33 in hexadecimal notation) for the Red, Green and Blue components. So, to be sure that the colours you use will not be dithered, only use #rrggbb triplets made up of components of 33 (00, 33, 66, 99, CC and FF). For instance, "#0066FF"
would be a 'safe' colour, while "#FFF0FA"
wouldn't (as it would be dithered to the nearest safe palette entry (i.e. "#FFFFFF"
on 8-bit (256) colour systems).
For a page that dynamically creates a table and populates it with cells using the colours in the safe browser palette, see this topic
NOTE : This re-colouring 'problem' can be seen more clearly in .GIF images that attempt to use colours that aren't part of the safe browser palette. Instead of choosing the nearest solid colour entry, Netscape and Internet Explorer will both dither the graphic according to the colour palette they have available. Hence it becomes more crucial to have an understanding of the safe browser palette when creating graphics for display on the Web.
NOTE : All of the attributes detailed on this page can be set using Style Sheet definitions.